class Search{
	constructor() {
		this.url="http://localhost/project/data/menu.json";
		this.oparent=document.querySelectorAll(".dropitem")
		this.oroot=document.querySelectorAll(".dropitem .drop_root")
		this.ochildren=document.querySelectorAll(".dropitem .drop_children")
		this.otitle=document.querySelectorAll(".drop_root_til")
		this.ofirstchildren=document.querySelectorAll(".drop_children .children_first")
		this.addEvent();
	}
	addEvent(){
		var that=this;
		for(let i=0;i<this.oroot.length;i++){
				this.oparent[i].onmouseenter=function(){
				that.ochildren[i].style.display="block";
				that.load(that.otitle[i].getAttribute('name'));
			}
		}
		for(let i=0;i<this.oroot.length;i++){
			this.oparent[i].onmouseleave=function(){
				that.ochildren[i].style.display="none";				
			}
		}
	}
	//调用ajax
	load(menu_name){
		var that=this;
		ajax({
			url:this.url,
			success:function(res){
				that.res=JSON.parse(res);
				that.display(menu_name);
			},
		})
	}
	display(menu_name){
		var str="";
		for(var i = 0;i < this.res.length;i ++){
			if(this.res[i].name == menu_name){
				for(var j=0;j<this.res[i].data.length;j++){
					var strz = "";
					for( var k=0; k < this.res[i].data[j].data.length; k++){
						strz += `<a href="${this.res[i].data[j].data[k].url}"><span>${this.res[i].data[j].data[k].name}</span></a>`;
					}
					str+=`<dl class="first_item">
						<dt><a href="#"><span>${this.res[i].data[j].name}</span></a></dt>
						<dd> 
							${strz}
						</dd>
					</dl>`
				}
				this.ofirstchildren[i].innerHTML=str
			}
		}

	}
}

new Search();